<template>
    <div class="data-auth">
        <div class="search-box">
            <div class="tips" style="display:inline-block;">
                针对审批、考勤、简报、销售等应用，设置该角色的查看、管理数据范围
            </div>
        </div>
        <div class="table-box">
            <el-table v-loading="loading" height="100%" :data="tableData">
                <el-table-column label="应用" prop="objName" width="150" align="left" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="查看数据范围" prop="dataPermName" min-width="150" align="left" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="管理数据范围" prop="opeDataPermName" min-width="150" align="left"
                    show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="80">
                    <template slot-scope="scope">
                        <el-button type="text" @click="authFun(scope.row)">设置</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <set-auth ref="set" @refresh="getDataAuth"></set-auth>
    </div>
</template>

<script>
    import setAuth from './setAuth';
    import {
        getDataAuthlistById
    } from '../service.js';
    import {
        mapState
    } from 'vuex';
    export default {
        name: 'dataAuth', // 数据权限
        props: {
            treeNode: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        components: {
            setAuth
        },
        data() {
            return {
                tableData: [],
                loading: false,
            }
        },
        computed: {
            ...mapState({
                systemId: state => state.token.systemId
            })
        },
        watch: {
            treeNode: {
                handler: function (node) {
                    if (node.id && node.nodeType != 'cate') {
                        this.getDataAuth();
                    } else {
                        this.tableData = [];
                    }
                },
                immediate: true
            }
        },
        methods: {
            getDataAuth() {
                let params = {
                    resourceCode: 'USER',
                    resourceId: this.treeNode.id,
                    systemCode: this.systemId
                }
                this.loading = true;
                getDataAuthlistById(params).then(res => {
                    if (res.data.code == 1000) {
                        let data = res.data.data;
                        if (Array.isArray(data)) {
                            this.tableData = [...data];
                        } else {
                            this.tableData = [];
                        }
                    }
                    this.loading = false;
                }).catch(error => {
                    this.loading = false;
                })
            },
            authFun(row) {
                this.$refs.set.showDialog(row);
            },
        }
    }

</script>

<style lang="scss" scoped>
    .data-auth {
        height: 500px;
        display: flex;
        flex-direction: column;

        .table-box {
            flex: 1;
            overflow: hidden;
        }
    }

</style>
